<template>
  <div class="p-4 flex gap-4 h-full">
    <a-card :bordered="false" class="bg-white w-[280px]">
      <h2 class="text-center border-b border-dashed pb-4 font-bold">
        {{ article ? '编辑文章' : '新增文章' }}
      </h2>
      <a-form :form="form" layout="vertical" @submit="handleSubmit">
        <a-form-item label="文章标题">
          <a-input
            v-decorator="[
              'title',
              {
                rules: [{ required: true, message: '文章标题不能为空!' }],
                initialValue: article?.title,
              },
            ]"
            placeholder="请输入文章标题"
          />
        </a-form-item>
        <a-form-item label="文章描述">
          <a-textarea
            v-decorator="[
              'desc',
              {
                rules: [{ required: true, message: '文章描述不能为空!' }],
                initialValue: article?.desc,
              },
            ]"
            placeholder="请输入文章描述"
          />
        </a-form-item>

        <a-form-item label="是否开启评论">
          <a-switch
            v-decorator="[
              'comment',
              {
                valuePropName: 'checked',
                initialValue: article?.comment === 2 ? false : true,
              },
            ]"
            checked-children="开"
            un-checked-children="关"
          />
        </a-form-item>

        <a-form-item label="文章标签">
          <a-select
            v-decorator="[
              'tags',
              {
                initialValue: article?.tags.map((one) => one.id),
              },
            ]"
            placeholder="请选择要查询的标签"
            mode="multiple"
            style="width: 200px"
          >
            <a-select-option v-for="tag in tags" :key="tag.id" :value="tag.id">
              {{ tag.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="文章封面">
          <a-input
            v-decorator="[
              'picture',
              {
                initialValue: article?.picture,
              },
            ]"
            placeholder="请输入文章封面地址"
          />
        </a-form-item>

        <a-form-item>
          <a-button html-type="submit" type="primary" block>
            {{ article ? '立即保存' : '立即新增' }}
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
    <a-card :bordered="false" class="card-wrapper h-full bg-white flex-1 w-0">
      <div id="editor-wrapper">
        <!-- eslint-disable-next-line vue/no-v-html -->
        <textarea style="display: none" v-html="article?.content"> </textarea>
      </div>
    </a-card>
  </div>
</template>

<script>
export default {
  props: {
    tags: {
      type: Array,
      default: () => [],
    },
    article: {
      type: [Object, null],
      default: null,
    },
  },
  data() {
    return {
      editor: null,
      form: this.$form.createForm(this, {}),
      articleCover: {
        url: '',
        file: null,
      },
    }
  },

  mounted() {
    const timer = setInterval(() => {
      if (global.$ && global.editormd) {
        this.initEditor()
        clearInterval(timer)
      }
    }, 10)
  },
  methods: {
    initEditor() {
      this.editor = editormd('editor-wrapper', {
        width: '100%',
        height: '100%',
        path: '/editor.md/lib/',
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (err) return false
        if (this.article) {
          this.updateArticle(values)
        } else {
          this.insertArticle(values)
        }
      })
    },

    async insertArticle(values) {
      const content = this.editor.getMarkdown()

      const { data } = await this.$apis.admin.insertArticle({
        ...values,
        content,
        comment: Number(values.comment),
        user: {
          id: 2,
        },
      })
      this.$message.success('新增成功')
      setTimeout(() => {
        this.$router.push(
          this.localeLocation({ path: `/admin/handle-article/${data.id}` })
        )
      }, 2000)
    },

    async updateArticle(values) {
      const newArticle = { ...this.article }
      delete newArticle.create_time
      delete newArticle.update_time
      delete newArticle.user
      const content = this.editor.getMarkdown()
      await this.$apis.admin.updateArticle({
        ...newArticle,
        ...values,
        content,
        comment: Number(values.comment),
      })
      this.$message.success('保存成功')
    },

    // onBeforeUpload(file) {
    //   this.articleCover.file = file
    //   return false
    // },
  },
}
</script>

<style lang="scss" scoped>
.card-wrapper {
  &::v-deep {
    .ant-card-body {
      height: calc(100% - 1px);
      #editor-wrapper {
      }
    }
  }
  .editormd {
    margin: 0 auto;
  }
}
</style>
